<template>
  <div>
    <!-- 调用组件 -->
    <draggable class="box" element="div" v-model="list">
      <div class="item" v-for="item in list" :key="item.id">{{item.name}}</div>
    </draggable>
    <!-- 输出list数据 -->
    {{list}}
  </div>
</template>

<script>
/* eslint-disable */
// 引入拖拽组件
import draggable from "vuedraggable";
export default {
  name: "demo",
  components: {
    // 调用组件
    draggable,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "a",
        },
        {
          id: 2,
          name: "b",
        },
        {
          id: 3,
          name: "c",
        },
        {
          id: 4,
          name: "d",
        },
        {
          id: 5,
          name: "e",
        },
        {
          id: 6,
          name: "f",
        },
        {
          id: 7,
          name: "g",
        },
        {
          id: 8,
          name: "h",
        },
        {
          id: 9,
          name: "i",
        },
        {
          id: 10,
          name: "j",
        },
        {
          id: 11,
          name: "k",
        },
        {
          id: 12,
          name: "l",
        },
      ],
    };
  },
};
</script>
<style scoped>
.box {
  width: 500px;
  height: 500px;
  background-color: aquamarine;
}
.item {
  display: inline-block;
  height: 50px;
  width: 50px;
  text-align: center;
  margin: 5px;
  line-height: 50px;
  background-color: brown;
  cursor: move;
}
</style>
